Skip to content

fix: preserve aspect ratio for URL image previews#40399

Open
TasfinMahmud wants to merge 1 commit intoRocketChat:developfrom
TasfinMahmud:fix/url-image-aspect-ratio
Open

fix: preserve aspect ratio for URL image previews#40399
TasfinMahmud wants to merge 1 commit intoRocketChat:developfrom
TasfinMahmud:fix/url-image-aspect-ratio

Conversation

@TasfinMahmud
Copy link
Copy Markdown

@TasfinMahmud TasfinMahmud commented May 5, 2026

Description

Fixes #40289

Images shared via URL previews (e.g., Giphy GIFs) were being stretched to fill the Box dimensions independently, causing distorted aspect ratios.

Checklist

  • I have read the CONTRIBUTING doc
  • - [x] My pull request name is descriptive and follows naming conventions
  • - [x] My changes have tests (if applicable)
  • - [x] My changes have documentation (if applicable)
  • - [x] I have signed the CLA

Images shared via URL previews (e.g., Giphy GIFs) were being stretched
to fill the Box dimensions independently, causing distorted aspect ratios.

Added object-fit: contain and width: auto to MessageGenericPreviewImage
so images scale proportionally within the maxHeight constraint.

Closes RocketChat#40289
@TasfinMahmud TasfinMahmud requested a review from a team as a code owner May 5, 2026 04:23
@dionisio-bot
Copy link
Copy Markdown
Contributor

dionisio-bot Bot commented May 5, 2026

Looks like this PR is not ready to merge, because of the following issues:

  • This PR is missing the 'stat: QA assured' label
  • This PR is missing the required milestone or project

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 5, 2026

🦋 Changeset detected

Latest commit: 73f3993

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 41 packages
Name Type
@rocket.chat/meteor Patch
@rocket.chat/core-typings Patch
@rocket.chat/rest-typings Patch
@rocket.chat/uikit-playground Patch
@rocket.chat/api-client Patch
@rocket.chat/apps Patch
@rocket.chat/core-services Patch
@rocket.chat/cron Patch
@rocket.chat/ddp-client Patch
@rocket.chat/fuselage-ui-kit Patch
@rocket.chat/gazzodown Patch
@rocket.chat/http-router Patch
@rocket.chat/livechat Patch
@rocket.chat/model-typings Patch
@rocket.chat/models Patch
@rocket.chat/ui-avatar Patch
@rocket.chat/ui-client Patch
@rocket.chat/ui-contexts Patch
@rocket.chat/ui-voip Patch
@rocket.chat/web-ui-registration Patch
@rocket.chat/account-service Patch
@rocket.chat/authorization-service Patch
@rocket.chat/ddp-streamer Patch
@rocket.chat/omnichannel-transcript Patch
@rocket.chat/presence-service Patch
@rocket.chat/queue-worker Patch
@rocket.chat/abac Patch
@rocket.chat/federation-matrix Patch
@rocket.chat/license Patch
@rocket.chat/media-calls Patch
@rocket.chat/omnichannel-services Patch
@rocket.chat/pdf-worker Patch
@rocket.chat/presence Patch
rocketchat-services Patch
@rocket.chat/network-broker Patch
@rocket.chat/omni-core-ee Patch
@rocket.chat/mock-providers Patch
@rocket.chat/instance-status Patch
@rocket.chat/omni-core Patch
@rocket.chat/server-fetch Patch
@rocket.chat/ui-video-conf Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 5, 2026

Walkthrough

A patch release for @rocket.chat/meteor adds CSS fixes to the UrlImagePreview component to correct distorted aspect ratios in image previews (e.g., Giphy GIFs) by constraining overflow and applying object-fit: contain with width: auto sizing.

Changes

Image Aspect Ratio Fix

Layer / File(s) Summary
Component Styling
apps/meteor/client/components/message/content/urlPreviews/UrlImagePreview.tsx
Box adds overflow='hidden'; MessageGenericPreviewImage receives inline style with maxHeight, width: 'auto', maxWidth: '100%', and objectFit: 'contain'. data-id attribute added to image.
Release Documentation
.changeset/fix-url-image-aspect-ratio.md
Changeset entry documenting patch-level fix for aspect ratio correction in @rocket.chat/meteor.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Suggested labels

type: bug

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and specifically describes the main change: fixing aspect ratio preservation for URL image previews, which directly addresses the core issue.
Linked Issues check ✅ Passed The changes directly implement the objective from issue #40289 by applying object-fit: contain and width: auto to fix distorted aspect ratios in URL-previewed images.
Out of Scope Changes check ✅ Passed All changes are within scope: the CSS modifications to UrlImagePreview.tsx address the aspect ratio issue, and the changeset documents the fix appropriately.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Incorrect Image Aspect Ratios

1 participant